<template>
  <div class="list">
    <h1>待办列表</h1>
    <button @click="clear">清空日程</button>
    <!-- <ul ref="calendar"> -->
    <transition-group
      tag="ul"
      ref="calendar"
      name="animate__animated animate__bounce"
      enter-active-class="animate__fadeInDown"
      leave-active-class="animate__fadeOutDown"
    >
      <li v-for="item in calendarData" :key="item.id" :data-index="item.id">

        <label :for="item.id"><p><input type="checkbox" name="" :id="item.id">{{ item.msg }}</p></label>
        <div class="control">
          <button @click="del($event)">失败</button>
          <button @click="complete($event)">完成</button>
        </div>
      </li>
    </transition-group>
    <!-- </ul> -->
  </div>
</template>

<script>
import "animate.css";
export default {
  name: "List",
  props: ["calendarData"],
  mounted() {
    //事件委托给每个li绑定事件长按
    this.longPress(this.$refs.calendar.$el, (event) => {
      console.log("长按事件成功", event.target);
      document.querySelectorAll(".control").forEach((item) => {
        item.style.display = "none";
      });
      event.target.parentNode.nextElementSibling.style.display = "block";
    });
  },
  methods: {
    del(event) {
        console.log(event.target)
      let index = event.target.parentNode.parentNode.dataset.index;
      let temp = this.calendarData.filter((item) => item.id != index);
      localStorage.info = JSON.stringify(temp);
      localStorage.del === undefined
        ? (localStorage.del = 1)
        : localStorage.del++;
      this.$emit("getMessage");
    },
    complete(event) {
        console.log(event.target.parentNode.parentNode.dataset);
      let index = event.target.parentNode.parentNode.dataset.index;
      let temp = this.calendarData.filter((item) => item.id != index);
      localStorage.info = JSON.stringify(temp);
      localStorage.complete === undefined
        ? (localStorage.complete = 1)
        : localStorage.complete++;
      this.$emit("getMessage");
    },
    longPress(element, func, timeout = 500) {
      //给元素挂载一个长按函数事件
      let timer;
      element.addEventListener("touchstart", function (event) {
        clearTimeout(timer);
        timer = setTimeout(() => {
          func(event);
        }, timeout);
      });
      element.addEventListener("touchmove", (event) => {
        clearTimeout(timer);
      });
      element.addEventListener("touchend", (event) => {
        clearTimeout(timer);
      });
      element.addEventListener("touchcancel", (event) => {
        clearTimeout(timer);
      });
    },
    clear(){
        localStorage.clear();
        this.$emit("getMessage");
    }
  },
};
</script>

<style lang="less" scoped>
// .v-enter,.v-leave-to{
//     opacity: 0;
// }
// .v-enter-to,.v-leave{
//     opacity: 1;
// }
// .v-enter-active{
//     transition: all 500ms linear;
// }
// .v-leave-active{
//     transition:all 500ms linear
// }
// .v-move{
//     transition:all 500ms linear
// }

.list {
  flex: 1;
  overflow: hidden;
  padding: 10px;
  display: flex;
  flex-direction: column;
  h1 {
    font-size: 20px;
  }
  ul {
    flex: 1;
    overflow: hidden;
  }
  li {
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
    margin: 5px 0;
    line-height: 40px;
    &:nth-child(2n) {
      background-color: gray;
    }
    &:nth-child(2n-1) {
      background-color: skyblue;
    }
    button {
      border: 0;
      background-color: black;
      padding: 5px;
      margin-left: 5px;
      color: white;
    }
    .control {
      text-align: right;
      display: none;
    }
  }
}
</style>